<!-- canvas_background -->
<template>
  <canvas ref="canvas_background"> <h2>您的浏览器不支持 HTML5 canvas 标签。</h2> </canvas>
</template>
<script>
export default {
  name: 'canvas_background',
  data() {
    return {
      innerW: window.innerWidth,
      innerH: window.innerHeight
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init: function() {
      let canvas = this.$refs.canvas_background
      let context = canvas.getContext('2d')

      canvas.width = this.innerW
      canvas.height = this.innerH

      requestAnimationFrame = requestAnimationFrame || webkitRequestAnimationFrame

      let options = {
        amount: 100,
        upper_limit: 20,
        lower_limit: 1
      }

      let upper_size = 10
      let lower_size = 4
      let doIt = function doIt() {
        return Math.random() > 0.5
      }

      let update = function update(p) {
        return doIt() ? Math.max(options.lower_limit, p - 1) : Math.min(p + 1, options.upper_limit)
      }

      let reset = function reset(p) {
        p.x = p.startX
        p.y = p.startY
      }

      let floored = function floored(r) {
        return Math.floor(Math.random() * r)
      }

      let genParticles = function genParticles() {
        return new Array(options.amount).fill().map(function(p) {
          let size = floored(upper_size) + lower_size
          let c = document.createElement('canvas')
          let ctx = c.getContext('2d')
          let r = Math.PI / 180 * floored(360)
          let color = 'rgba(207,' + (100 + Math.floor(Math.random() * 70)) + ', 100, ' + Math.random() + ')'
          let xDelayed = doIt()
          let startX = xDelayed ? -(size + floored(canvas.width)) : floored(canvas.width * 0.25)
          let startY = xDelayed ? size + floored(canvas.height * 0.25) + Math.floor(canvas.height * 0.75) : canvas.height + size + floored(canvas.height)

          c.height = size
          c.width = size

          context.globalCompositeOperation = 'multiply'

          ctx.translate(size / 2, size / 2)
          ctx.rotate(r)
          ctx.translate(-(size / 2), -(size / 2))
          ctx.fillStyle = color
          ctx.fillRect(0, 0, size, size)

          return {
            x: startX,
            y: startY,
            startY: startY,
            startX: startX,
            c: c,
            r: r,
            vx: floored(options.upper_limit / 4),
            vy: floored(options.upper_limit / 4),
            size: size
          }
        })
      }
      let particles = genParticles()
      let FRAME_COUNT = 0
      let draw = function draw() {
        if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
          canvas.width = this.innerW
          canvas.height = this.innerH
          particles = genParticles()
        }
        let _iteratorNormalCompletion = true
        let _didIteratorError = false
        let _iteratorError
        try {
          for (let _iterator = particles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            let particle = _step.value
            context.clearRect(particle.x, particle.y, particle.size, particle.size)
            FRAME_COUNT++
            if (particle.y < canvas.height || particle.startX < 0) particle.x += particle.vx
            if (particle.x > 0 || particle.startY > canvas.height) particle.y -= particle.vy
            if (FRAME_COUNT % 11 === 0 && doIt()) particle.vx = update(particle.vx)
            if (FRAME_COUNT % 13 === 0 && doIt()) particle.vy = update(particle.vy)
            context.drawImage(particle.c, particle.x, particle.y)
            if (particle.x > canvas.width || particle.y < -particle.size) reset(particle)
          }
        } catch (err) {
          _didIteratorError = true
          _iteratorError = err
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return()
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError
            }
          }
        }
        requestAnimationFrame(draw)
      }
      requestAnimationFrame(draw)
    }
  }
}

</script>
